<template>
  <!--
  :data   表格中需要展示的数据
  prop:   需要展示数据的属性名
  label:  表的字段名
  width:   列宽
  -->
    <div>
        <div>
            <el-button type="primary" size="medium" @click="add">新增</el-button>
            <el-button type="danger" size="medium" @click="del">批量删除</el-button>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
            ></el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="sizes, prev, pager, next, total,jumper"
                    :total="400">
            </el-pagination>
        </div>

<!--        添加弹出层-->
        <el-dialog title="新增" :visible.sync="dialogFormVisible"  @close="clearForm" >
            <el-form :model="form"  ref="form"  :rules="rules">
                <el-form-item label="活动名称" :label-width="formLabelWidth"  prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth" prop="region">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

<!--        编辑弹出层-->
        <el-drawer
            title="我嵌套了 Form !"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button >取 消</el-button>
                    <el-button type="primary">确定</el-button>
                </div>
            </div>

        </el-drawer>
    </div>

</template>

<script>
export default {
    name: "TableIndex",
    data() {
        return {
            form:{
                name:'',
                region:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ]
            },
            dialog:false,
            dialogFormVisible:false,   // 控制弹出层的显示和隐藏  true  显示  false  隐藏
            formLabelWidth: '120px',
            tableData: [
                {
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    id: 2,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 3,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 4,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 5,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 6,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 7,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
            ids: []
        }
    },
    methods: {

        clearForm(){
            console.log("@@close")
            //  弹窗关闭时   清空表单
            this.form = {
                name:'',
                region:''
            }
            // 清除校验规则
            this.$refs['form'].clearValidate()
        },
        //  提交数据
        addSubmit(){
            console.log(JSON.stringify(this.form))
            // 发送异步请求  添加数据  axios
            // 关闭 弹出层
            this.dialogFormVisible = false

        },
        //  参数val  是目前已经选中行的所有数据
        handleSelectionChange(val) {
            this.ids = val.map(line => line.id);
        },
        handleEdit(row) {

            console.log(JSON.stringify(row))
            // this.form = {
            //     name:'测试',
            //     region:'shanghai'
            // }
            //
            // this.dialogFormVisible = true
            // console.log(JSON.stringify(row));

            this.dialog = true
        },
        handleDelete(row) {
            console.log(JSON.stringify(row));
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        add() {
            //  dialogFormVisible 重新赋值   true  实现弹窗的显示
            this.dialogFormVisible = true
        },
        del() {
           //  提示警告信息
            this.$message({
                message:'确定要删除选中数据吗?',
                type:'warning',
                showClose: true,  // 可关闭
                onClose:()=>{   // 信息提示结束后  回调函数
                    console.log("@@ onClose ")
                    // 重载数据表格
                }
            })

            //   提示信息的简化写法
            // this.$message.success('确定要删除选中数据吗? success')
            // this.$message.error('确定要删除选中数据吗?  error')
            // this.$message.warning('确定要删除选中数据吗? warning')
            // this.$message.info('确定要删除选中数据吗? info')
        }
    }
}
</script>

<style scoped>

</style>